<template>
  <div class="container">
    <div class="title">
      <img :src="tag==1? 'http://file.rzkeji.com/web/loveciy/img/circle/classification.png' : 'http://file.rzkeji.com/web/loveciy/img/circle/classification1.png'" class="classification" @click="show"/>
      <div class="searchPosition">
        <input type="text" class="search" @blur="search" confirm-type="搜索" placeholder="搜索文创" placeholder-style="font-size: 14px" />
        <img src="http://file.rzkeji.com/web/loveciy/img/circle/search.png"/>
      </div>
      <img :src="titleGood ? 'http://file.rzkeji.com/web/loveciy/img/circle/love.png' : 'http://file.rzkeji.com/web/loveciy/img/circle/backLove.png'" class="love" @click="filter()"/>
    </div>
    <drop1 :type="circleType" :animationData="animationData" :tag="circle"></drop1>
    <div class="content">
      <ul class="first">
        <li v-for="(value1,index1) in shareData">
          <div class="headImg">
            <img :src="value1.userInfo.photo_img_url"/>
          </div>
          <div class="details">
            <div class="detailsTitle">
              <span>{{value1.userInfo.nickname}}</span>
              <span>{{value1.tag}}</span>
              <span>{{value1.created_at}}</span>
            </div>
            <div class="content-info"><text class="detailsContent">{{value1.title}}</text></div>
            <ul class="second clearfix" v-if="value1.type=='image' ? true : false">
              <li v-for="(value2,index2) in value1.shareShowImg">
                <image :src="value2"  @click="showImg(value2,value1.shareShowImg)" mode="aspectFill" class="secondImg"></image>
              </li>
            </ul>
            <div class="article" v-else @click="goDetails(value1.link_url)">
              <img :src="value1.img_url" mode="aspectFill"/>
              <div>{{value1.content}}</div>
            </div>
            <div class="detailsFooter">
              <span>阅读:{{value1.readNum}}</span>
              <span @click="setGood(index1,value1.id)">
                <img :src="value1.myLike ? 'http://file.rzkeji.com/web/loveciy/img/circle/backLove.png' :'http://file.rzkeji.com/web/loveciy/img/circle/love.png' "/>
                <!--<span>{{value1.likeNum}}</span>-->
                <span>收藏</span>
              </span>
              <span @click="share" class="share">
                <button open-type="share">
                  <img src="http://file.rzkeji.com/web/loveciy/img/circle/share1.png"/>
                  <span>分享</span>
                </button>
              </span>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="ucenter">
          <navigator url="../personal/main">
            <img src="http://ciy.oss-cn-shenzhen.aliyuncs.com/web/cut/icon-ucenter.png" class="customer"/>
          </navigator>
    </div>
    <div class="customerWrap">
          <navigator url="../customer/main">
            <img src="http://file.rzkeji.com/web/loveciy/img/customer.png" class="customer"/>
          </navigator>
    </div>
  </div>
</template>

<script>
import drop1 from '@/components/drop'
export default {
  data () {
    return {
      animationData:{},
      tag:1,
      circleType:[],
      titleGood:true,
    }
  },
  computed:{
    shareData:{
      get: function () {
        return  this.$store.state.modulesCircle.circleData;
      },
      set: function (newValue) {
        this.$store.dispatch('setCircleData',newValue)
      }
    },
    circle_id:{
      get: function () {
        return this.$store.state.modulesCircle.circle_id
      },
      set: function (newValue) {
        this.$store.dispatch('setCircleId',newValue)
      }
    },
    tagGood:{
      get: function () {
        return this.$store.state.modulesCircle.tagGood
      },
      set: function (newValue) {
        this.$store.dispatch('setTagGood',newValue)
      }
    },
    page:{
      get: function () {
        return this.$store.state.modulesCircle.page
      },
      set: function (newValue) {
        this.$store.dispatch('setPage',newValue)
      }
    },
    ifLoad:{
      get: function () {
        return this.$store.state.modulesCircle.ifLoad
      },
      set: function (newValue) {
        this.$store.dispatch('setIfLoad',newValue)
      }
    },
  },
  created(){
    var _this=this;
    //获取分类信息
    _this.$request.getData("https://diy.zoomyoung.cn/api/goods/get-plan-classify","").then(res =>{
      var res=res.data.data;
      for(let [index,value] of res.entries())
      {
        res[index].select=false;
      }
      res.unshift({   //因为这个接口发回来的数据分类没有包含全部
        select:true,
        id:"",
        name:"全部"
      })
      _this.circleType=res;
    })
    //获取造物圈的内容
    _this.getData(_this.page,_this.circle_id,_this.tagGood,"")
  },
  components: {
    drop1
  },
  onReachBottom(){    //向上啦到底部的时候执行
    var _this=this;
    console.log(_this.ifLoad)
    if(!_this.ifLoad)
    {
      console.log('a')
     _this.page++;
     _this.getData(_this.page,_this.circle_id,_this.tagGood,"")
    }
  },
  methods: {
   goDetails(src){
    this.$currency.goDetails(src)
   },
   showImg(img_url,img_arr){
    wx.previewImage({
      current:img_url,
      urls:img_arr
    })
   },
   search(e){
    var _this=this;
    _this.page=0;
    _this.$store.dispatch('setCircleData',[]);
    _this.getData('0',_this.circle_id,_this.tagGood,e.target.value)
   },
   filter(){    //筛选被自己点赞的信息
    var _this=this;
    _this.titleGood=!_this.titleGood;
    if(_this.titleGood)
    {
      _this.tagGood=0;
      _this.page=0;
    }else{
      _this.tagGood=1;
    }
    _this.$store.dispatch('setCircleData',[])
    _this.getData('0',_this.circle_id,_this.tagGood,"")
   },
   setGood(index,id){   //点赞
     var _this=this;
     var userToken=wx.getStorageSync('userToken')
     _this.$request.postData("https://diy.zoomyoung.cn/api/circle/set-like",{id:id,user_token:userToken}).then(res =>{
        if(res.data.level == "success"){
          var res=res.data;
          if(res.data=='del_like')
          {
            _this.shareData[index].likeNum=parseInt(_this.shareData[index].likeNum)-1;
            _this.shareData[index].myLike=0;
          }else{
            _this.shareData[index].likeNum=parseInt(_this.shareData[index].likeNum)+1;
            _this.shareData[index].myLike=1;
          }
        }else{
          if(res.data.data == "no_login"){
              wx.navigateTo({
                   url:"/pages/login/main"
              })
          }else{
              this.$currency.showToast(res.data.message,'none',2500)
          }
        }

     })
   },
   filterTime(time){
    var time=time.split(" ")[0].slice(time.split(" ")[0].indexOf("-")+1);
    var timeArr=time.split("-");
    return timeArr[0]+"月"+timeArr[1]+"日"
   },
   getData(page,id,tagGood,keyword){
    var _this=this;
    wx.showNavigationBarLoading()
    var userToken=wx.getStorageSync('userToken')
    _this.$request.getData("https://diy.zoomyoung.cn/api/circle/get-circle-list",{page:page,classify_id:id,user_token:userToken,my_like:tagGood,keyword:keyword}).then(res =>{
      var res=res.data.data;
      if(res.length==0)
      {
        _this.ifLoad=true
      }else{
        _this.ifLoad=false
      }
      for(let [index,value] of res.entries())
      {
        var time=_this.filterTime(res[index].created_at)
        _this.shareData.push({
          shareShowImg:res[index].thumb_imgs,
          userInfo:res[index].user_info,
          readNum:res[index].read_num,
          likeNum:res[index].like_num,
          title:res[index].title,
          tag:res[index].tag,
          created_at:time,
          index:index,
          myLike:res[index].is_my_like,
          id:res[index].id,
          type:res[index].type,
          content:res[index].content,
          img_url:res[index].img_url,
          link_url:res[index].link_url
        })
      }
      console.log(_this.shareData.length)
      wx.hideNavigationBarLoading()
    })
   },
   show(){
    var _this=this;
    var animation = wx.createAnimation({
      duration: 200,
        timingFunction: 'linear',
    })
    if(_this.tag==1)
    {
      animation.height(158).opacity(1).step();
      _this.tag=0
    }else{
      animation.height(0).opacity(0).step();
      _this.tag=1
    }
     _this.animationData=animation.export();
   }
  },
  onShareAppMessage(res){
    this.$currency.share(res,'造物圈分享','/pages/circle/main')
  }
}
</script>

<style scoped>
.container{width: 100%;overflow: hidden;}
.title{width: 100%;height: 20px;display: flex;justify-content: row;padding-top: 10px;padding-bottom: 30px;border-bottom: 0.5px solid #d9d9d9}
.classification{width: 30px;height:27px;margin-left: 10px;margin-top: 8px;}
.searchPosition{position: relative;height: 41.39px;}
.searchPosition img{width: 25px;height: 25px;position: absolute;left: 15px;top:10px;}
.search{width: 244px;height: 41.39px;margin-left: 6px;border-radius: 10px;padding-left:40px;background-color: #f2f2f2}
.love{width: 27px;height: 27px;margin-left: 10px;margin-top: 7px;}
.content{width:96%;margin-top: 15px;margin-left: 2%}
.content ul.first{width: 100%;}
.content ul.first>li{width: 100%;display: flex;justify-content: row;margin-top: 35px;padding-bottom: 10px;border-bottom: 0.4px solid #d9d9d9}
.headImg{width: 50px;}
.headImg img{width: 40px;height: 40px;border-radius: 40px;}
.details{width: 315px;padding-right:30rpx;}
.detailsTitle{width: 100%;height:40px;display: flex;justify-content: row;position: relative;}
.detailsTitle>span:nth-of-type(1){font-size: 17px;font-weight: 600;margin-left: 10px;margin-right: 10px;}
.detailsTitle>span:nth-of-type(2){font-size: 14px;display: block;width: 50px;height: 18px;text-align: center;line-height: 18px;margin-left:10px;color: #9d9d9d;background: #333333;border-radius:10px;margin-top:4px;}
.detailsTitle>span:nth-of-type(3){font-size: 14px;color: #9d9d9d;position: absolute;right:0;top:0 ;}
.detailsContent{width: 310px;line-height: 25px;font-size: 16px;}
.second{width: 310px;margin-top: 10px;margin-bottom: 10px;margin-left:10px}
.second li{width:100px;height:100px;margin-right: 3px;float: left;margin-top: 10px;overflow:hidden;position: relative;}
.secondImg{width:100px;height:100px;}
.detailsFooter{width: 310px;height: 40px;display: flex;justify-content: row;color: gray;margin-left:10px;}
.detailsFooter>span{display: block;display: flex;justify-content: row;height: 24px;line-height: 24px}
.detailsFooter>span img{width: 15px;height: 15px;vertical-align: middle;margin-left:8px;margin-right: 8px;}
.detailsFooter>span span{vertical-align: middle;}
.detailsFooter>span:nth-of-type(1){width: 100px;font-size: 14px;height: 30px;line-height: 30px;margin-top: 5px;}
.detailsFooter>span:nth-of-type(2) img{margin-top: 4px;}
.detailsFooter>span:nth-of-type(2),.detailsFooter>span:nth-of-type(3){width: 68px;font-size: 14px;border:0.2px solid #999999;border-radius: 10px;margin-top: 5px;}
.detailsFooter>span:nth-of-type(2){margin-left: 58px;}
.detailsFooter>span:nth-of-type(3){width: 65px;margin-left: 10px;}
.share button{width: 65px;height: 24px;margin-left: 0px;background: transparent;font-size: 14px;padding:0;line-height: 24px;color: #9d9d9d;text-align: left;}
.share button span{margin-top: 20px;}
.share button::after{border:none;}   /*初始化button的样式*/
.customerWrap{width: 50px;height: 50px;position: fixed;right: 20px;bottom: 20px;background: rgba(0,0,0,0.5);border-radius: 50px;}
.customer{width:40px;height:40px;margin-left:5px;margin-top:5px;}
.article{margin-top: 10px;background-color: #f2f2f2;padding: 10px;width: 290px;margin-bottom: 10px;}
.article img{width: 290px;display: block;}
.article div{line-height:25px;font-size:16px;margin-top: 10px;}
.ucenter{width: 50px;height: 50px;position: fixed;right: 20px;bottom: 80px;background: rgba(0,0,0,0.5);border-radius: 50px;}
.content-info{margin-left: 19rpx}
</style>
